<html>

	<head>
		<title>视频列表</title>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

		<link href="../../css/skin/default/style.css" rel="stylesheet" type="text/css" />
		<link href="../../css/dialog.css" rel="stylesheet">
		<link href="../../js/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />

		<script src="../../js/lib/jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
		<script src="../../js/lib/ligerUI/js/ligerui.all.js" type="text/javascript"></script>

		<script src="../../js/lib/ligerUI/js/plugins/ligerPopupEdit.js"></script>
		<script src="../../js/lib/ligerUI/js/plugins/ligerLayout.js" type="text/javascript"></script>
		<script src="../../js/lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
		<script src="../../js/lib/ligerUI/js/plugins/ligerForm.js" type="text/javascript"></script>
		<script src="../../js/lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
		<script src="../../js/lib/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
		<script src="../../js/lib/ligerUI/js/plugins/ligerDateEditor.js" type="text/javascript"></script>
		<script src="../../js/lib/ligerUI/js/plugins/ligerRadio.js" type="text/javascript"></script>
		<script src="../../js/lib/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>
		<script src="../../js/lib/ligerUI/js/plugins/ligerSpinner.js" type="text/javascript"></script>
		<script src="../../js/lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>
		<script src="../../js/lib/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
		<script src="../../js/lib/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>
		<script src="../../js/lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
		<script src="../../js/lib/ligerUI/js/plugins/ligerTip.js" type="text/javascript"></script>
		<script src="../../js/lib/ligerUI/js/plugins/ligerMenu.js" type="text/javascript"></script>
		<script src="../../js/lib/ligerUI/js/plugins/ligerToolBar.js" type="text/javascript"></script>
		<script type="text/javascript" src='../../js/JScripts/plupload/js/plupload.full.min.js'></script>
		<script src="../../js/lib/jquery.form.js" type="text/javascript"></script>
		<script src="../../js/lib/json2.js" type="text/javascript"></script>
		<script src="https://cdn.bootcss.com/json3/3.3.2/json3.min.js"></script>
		<script type="text/javascript" src='https://unpkg.com/qiniu-js@2.0.2/dist/qiniu.min.js'></script>
		<script src="../../js/dialog.js"></script>
		<script src="../../js/JS/layout.js"></script>
		<script src="../../js/constants.js" type="text/javascript"></script>
		<script src="../../js/api.js" type="text/javascript"></script>
		<script src="../../js/qiulib/uploadvedio.js" type="text/javascript"></script>

		<script type="text/javascript">
			var manager;
			$(document).hover(parent.hindMenu);

			var mid = $api.getparastr("mid");
			var pageUrl = BaseUrl + "Video?token=" + $api.getStorage("token");

			var token;
			var domain;

			var config = {
				useCdnDomain: true,
				disableStatisticsReport: false,
				retryCount: 6,
				region: qiniu.region.z0
			};
			var putExtra = {
				fname: "",
				params: {},
				mimeType: null
			};
			$(function() {
				$("form").ligerForm();
				//				initQiuniu();
				//				toolbar();
				initView();
				//				initUpView();

			});

			//			function initUpView() {
			//				var uploadUrl = qiniu.getUploadUrl(config, token);
			//
			//				var indexCount = 0;
			//				var resume = false;
			//				var chunk_size;
			//				var blockSize;
			//				var uploader = new plupload.Uploader({
			//					runtimes: "html5,flash,silverlight,html4",
			//					url: uploadUrl,
			//					browse_button: "select", // 触发文件选择对话框的按钮，为那个元素id
			//					flash_swf_url: "./js/Moxie.swf", // swf文件，当需要使用swf方式进行上传时需要配置该参数
			//					silverlight_xap_url: "./js/Moxie.xap",
			//					chunk_size: 4 * 1024 * 1024,
			//					max_retries: 3,
			//					multipart_params: {
			//						// token从服务端获取，没有token无法上传
			//						token: token
			//					},
			//					init: {
			//						PostInit: function() {
			//							console.log("upload init");
			//						},
			//						FilesAdded: function(up, files) {
			//							resume = false;
			//							chunk_size = uploader.getOption("chunk_size");
			//							var id = files[0].id;
			//							// 添加上传dom面板
			//							board[id] = addUploadBoard(files[0], config, files[0].name, "2");
			//							board[id].start = true;
			//							// 绑定上传按钮开始事件
			//							$(board[id])
			//								.find(".control-upload")
			//								.on("click", function() {
			//									if(board[id].start) {
			//										uploader.start();
			//										board[id].start = false;
			//										$(this).text("取消上传");
			//									} else {
			//										uploader.stop();
			//										board[id].start = true;
			//										$(this).text("开始上传");
			//									}
			//								});
			//						},
			//						FileUploaded: function(up, file, info) {
			//							console.log(info);
			//						},
			//						UploadComplete: function(up, files) {
			//							// Called when all files are either uploaded or failed
			//							console.log("[完成]");
			//						},
			//						Error: function(up, err) {
			//							console.log(err.response);
			//						}
			//					}
			//				});
			//				uploader.init();
			//				uploader.bind('Error', function() {
			//					console.log(1234)
			//				})
			//				uploader.bind("BeforeUpload", function(uploader, file) {
			//					key = file.name;
			//					putExtra.params["x:name"] = key.split(".")[0];
			//					var id = file.id;
			//					chunk_size = uploader.getOption("chunk_size");
			//					var directUpload = function() {
			//						var multipart_params_obj = {};
			//						multipart_params_obj.token = token;
			//						// filterParams 返回符合自定义变量格式的数组，每个值为也为一个数组，包含变量名及变量值
			//						var customVarList = qiniu.filterParams(putExtra.params);
			//						for(var i = 0; i < customVarList.length; i++) {
			//							var k = customVarList[i];
			//							multipart_params_obj[k[0]] = k[1];
			//						}
			//						multipart_params_obj.key = key;
			//						uploader.setOption({
			//							url: uploadUrl,
			//							multipart: true,
			//							multipart_params: multipart_params_obj
			//						});
			//					};
			//
			//					var resumeUpload = function() {
			//						blockSize = chunk_size;
			//						initFileInfo(file);
			//						if(blockSize === 0) {
			//							mkFileRequest(file)
			//							uploader.stop()
			//							return
			//						}
			//						resume = true;
			//						var multipart_params_obj = {};
			//						// 计算已上传的chunk数量
			//						var index = Math.floor(file.loaded / chunk_size);
			//						/*var dom_total = $(board[id])
			//							.find("#totalBar")
			//							.children("#totalBarColor");
			//						if(board[id].start != "reusme") {
			//							$(board[id])
			//								.find(".fragment-group")
			//								.addClass("hide");
			//						}
			//						dom_total.css(
			//							"width",
			//							file.percent + "%"
			//						);*/
			//						// 初始化已上传的chunk进度
			//						//						for(var i = 0; i < index; i++) {
			//						//							var dom_finished = $(board[id])
			//						//								.find(".fragment-group li")
			//						//								.eq(i)
			//						//								.find("#childBarColor");
			//						//							dom_finished.css("width", "100%");
			//						//						}
			//						var headers = qiniu.getHeadersForChunkUpload(token)
			//						uploader.setOption({
			//							url: uploadUrl + "/mkblk/" + blockSize,
			//							multipart: false,
			//							required_features: "chunks",
			//							headers: {
			//								Authorization: "UpToken " + token
			//							},
			//							multipart_params: multipart_params_obj
			//						});
			//					};
			//					// 判断是否采取分片上传
			//					if(
			//						(uploader.runtime === "html5" ||
			//							uploader.runtime === "flash") &&
			//						chunk_size
			//					) {
			//						if(file.size < chunk_size) {
			//							directUpload();
			//						} else {
			//							resumeUpload();
			//						}
			//					} else {
			//						console.log(
			//							"directUpload because file.size < chunk_size || is_android_weixin_or_qq()"
			//						);
			//						directUpload();
			//					}
			//				});
			//
			//				uploader.bind("ChunkUploaded", function(up, file, info) {
			//					var res = JSON.parse(info.response);
			//					var leftSize = info.total - info.offset;
			//					var chunk_size = uploader.getOption && uploader.getOption("chunk_size");
			//					if(leftSize < chunk_size) {
			//						up.setOption({
			//							url: uploadUrl + "/mkblk/" + leftSize
			//						});
			//					}
			//					up.setOption({
			//						headers: {
			//							Authorization: "UpToken " + token
			//						}
			//					});
			//					// 更新本地存储状态
			//					var localFileInfo = JSON.parse(localStorage.getItem(file.name)) || [];
			//					localFileInfo[indexCount] = {
			//						ctx: res.ctx,
			//						time: new Date().getTime(),
			//						offset: info.offset,
			//						percent: file.percent
			//					};
			//					indexCount++;
			//					localStorage.setItem(file.name, JSON.stringify(localFileInfo));
			//				});
			//
			//				// 每个事件监听函数都会传入一些很有用的参数，
			//				// 我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
			//				uploader.bind("UploadProgress", function(uploader, file) {
			//					var id = file.id;
			//					// 更新进度条进度信息;
			//					var fileUploaded = file.loaded || 0;
			//					var dom_total = $(board[id])
			//						.find("#totalBar")
			//						.children("#totalBarColor");
			//					var percent = file.percent + "%";
			//					dom_total.css(
			//						"width",
			//						file.percent + "%"
			//					);
			//					$(board[id])
			//						.find(".speed")
			//						.text("进度：" + percent);
			//					var count = Math.ceil(file.size / uploader.getOption("chunk_size"));
			//					if(file.size > chunk_size) {
			//						updateChunkProgress(file, board[id], chunk_size, count);
			//					}
			//				});
			//
			//				uploader.bind("FileUploaded", function(uploader, file, info) {
			//					var id = file.id;
			//					if(resume) {
			//						mkFileRequest(file)
			//					} else {
			//						uploadFinish(JSON.parse(info.response), file.name, board[id]);
			//					}
			//				});
			//
			//				function updateChunkProgress(file, board, chunk_size, count) {
			//
			//					var index = Math.ceil(file.loaded / chunk_size);
			//					var leftSize = file.loaded - chunk_size * (index - 1);
			//					if(index == count) {
			//						chunk_size = file.size - chunk_size * (index - 1);
			//					}
			//
			//					//					var dom = $(board)
			//					//						.find(".fragment-group li")
			//					//						.eq(index - 1)
			//					//						.find("#childBarColor");
			//					//					dom.css(
			//					//						"width",
			//					//						leftSize / chunk_size * 100 + "%"
			//					//					);
			//				}
			//
			//				function uploadFinish(res, name, board) {
			//					localStorage.removeItem(name)
			//					//					$("#box input").removeAttr("disabled", "disabled");
			//					//					$("#box button").css("backgroundColor", "#00b7ee");
			//					//					$(board)
			//					//						.find("#totalBar")
			//					//						.addClass("hide");
			//					//					$(board)
			//					//						.find(".control-container")
			//					//						.html(
			//					//							"<p><strong>Hash：</strong>" +
			//					//							res.hash +
			//					//							"</p>" +
			//					//							"<p><strong>Bucket：</strong>" +
			//					//							res.bucket +
			//					//							"</p>"
			//					//						);
			//					//					if(res.key && res.key.match(/\.(jpg|jpeg|png|gif)$/)) {
			//					//						imageDeal(board, res.key, domain);
			//					//					}
			//				}
			//
			//				function initFileInfo(file) {
			//					var localFileInfo = JSON.parse(localStorage.getItem(file.name)) || [];
			//					indexCount = 0;
			//					var length = localFileInfo.length
			//					if(length) {
			//						var clearStatus = false
			//						for(var i = 0; i < localFileInfo.length; i++) {
			//							indexCount++
			//							if(isExpired(localFileInfo[i].time)) {
			//								clearStatus = true
			//								localStorage.removeItem(file.name);
			//								break;
			//							}
			//						}
			//						if(clearStatus) {
			//							indexCount = 0;
			//							return
			//						}
			//						file.loaded = localFileInfo[length - 1].offset;
			//						var leftSize = file.size - file.loaded;
			//						if(leftSize < chunk_size) {
			//							blockSize = leftSize
			//						}
			//						file.percent = localFileInfo[length - 1].percent;
			//						return
			//					} else {
			//						indexCount = 0
			//					}
			//				}
			//
			//				function mkFileRequest(file) {
			//					// 调用sdk的url构建函数
			//					var requestUrl = qiniu.createMkFileUrl(
			//						uploadUrl,
			//						file.size,
			//						key,
			//						putExtra
			//					);
			//					var ctx = []
			//					var id = file.id
			//					var local = JSON.parse(localStorage.getItem(file.name))
			//					for(var i = 0; i < local.length; i++) {
			//						ctx.push(local[i].ctx)
			//					}
			//					// 设置上传的header信息
			//					var headers = qiniu.getHeadersForMkFile(token)
			//					$.ajax({
			//						url: requestUrl,
			//						type: "POST",
			//						headers: headers,
			//						data: ctx.join(","),
			//						success: function(res) {
			//							uploadFinish(res, file.name, board[id]);
			//						}
			//					})
			//				}
			//
			//				function isExpired(time) {
			//					var expireAt = time + 3600 * 24 * 1000;
			//					return new Date().getTime() > expireAt;
			//				}
			//			}
			//
			//
			//			function initQiuniu() {
			//				var url = BaseUrl + "Qiniu?token=" + $api.getStorage("token");
			//				$api.ajax2(url, {}, function(res) {
			//					var token = res.Token;
			//					var domain = res.DoMain;
			//				});
			//			}

			function initView() {
				var url = pageUrl + "&key=";
				manager = $("#maingrid").ligerGrid({
					columns: [{
							display: '视频',
							name: 'Fpath',
							align: 'left',
							minWidth: 220,
							render: function(rowdata, rowindex, value) {
								return '<video id="video" style="width:280px;height:100px;"  src="' + rowdata.Fpath + '" controls="controls">' +
									'您的浏览器不支持 video 标签。' +
									'</video>';
							}
						},
						{
							display: '文件名',
							name: 'Fname',
							align: 'left',
							minWidth: 220
						},
						{
							display: '创建日期',
							isSort: true,
							name: 'Fdate',
							type: 'date',
							width: 200,
							align: 'center'
						},
						{
							display: '视频大小',
							name: 'Fsize',
							align: 'left',
							width: 200,
							render: function(rowdata, rowindex, value) {
								return rowdata.Fsize / 1024 / 1024 + "M";
							}
						}

					],
					dataAction: 'local',
					url: url,
					method: 'get',
					width: '99.5%',
					rowHeight: 110,
					pageSize: 10,
					usePager: true
				});

			}
			//工具
			//			function toolbar() {
			//				$api.getLimit(mid, 0, function(data) {
			//					$("#icon-list").append(data);
			//				});
			//			}
			//上传视频
			function add() {
				parent.openCommWindow2('vcommon/common/VideoUpDialog.html',
					"上传视频", 700, 480,
					function(res) {
						f_reload();
					});
			}

			function f_save() {
				var row = manager.getSelectedRow();
				if(row) {
					return row;
				} else {
					return null;
				}
			}

			//			function del(i) {
			//				var row = manager.getRow(i);
			//				if(row) {
			//					$.ligerDialog.confirm("视频删除后不能恢复，\n您确定要移除？", function(yes) {
			//						if(yes) {
			//							var url = unitUrl + "&action=del";
			//
			//							$api.ajax2(url, row, function(data) {
			//								f_reload();
			//							});
			//						}
			//					})
			//				}
			//			}

			function del() { 
				var row = manager.getSelectedRow();
				if(row) {
					top.$.ligerDialog.confirm("视频删除后不能恢复，\n您确定要移除？", function(yes) {
						if(yes) {
							var url = pageUrl + "&action=del";

							$api.ajax2(url, row, function(data) {
								f_reload();
							});
						}
					})
				} else {
					$.ligerDialog.warn("请选择删除视频！");
				}
			}

			function doSearch(high) {
				var key = $("#txtKeywords").val();
				var url = pageUrl + "&key=" + key;
				manager.GetDataByURL(url);
			}

			function f_reload() {
				manager.loadData(true);
			};
		</script>

	</head>

	<body class="mainbody">
		<form id="form1" onsubmit="return false">
			<div class="div-alarm">请不要上传重复视频,以免造成资源浪费，视频尽量请采用高清模式，视频费用包含视频存储+视频流量</div>
			<div class="toolbar-wrap">
				<div  class="toolbar">
					<div class="l-list">
						<ul id="icon-list" class="icon-list">
							<li>
								<a class='add' onclick='add();'><i></i><span>视频上传</span></a>
							</li>
							<li>
								<a class='del' onclick='del();'><i></i><span>视频删除</span></a>
							</li>

						</ul>
					</div>
					<div class="r-list">
						<input type="text" ID="txtKeywords" placeholder='视频名称' class="keyword" />
						<a class='btn-search' onclick='doSearch(false);' style="margin-right:10px;">搜索</a>

					</div>
				</div>
			</div>

			<div id="maingrid" style="margin: 0px;background:#fff;"></div>
			<!--<div class="div-content" style="margin-top: 10px;width:99.5%">
				<div class="divhead">信息管理小贴士</div>
				<hr class="divline" />
				<div style="padding:1px 5px; line-height:22px;"><span style="font-weight:bold">视频上传：</span> 请不要上传重复视频,以免造成资源浪费，视频尽量请采用高清模式，视频费用包含视频存储+视频流量</div>-->

		</form>

	</body>

</html>